<template>
  <div @click="enterPublish()">
    <el-tooltip placement="top">
      <div slot="content">
        版本发布记录
      </div>      
      <div class="icon-item">  
        <img :src="logo"> 
        <div class="badge" v-show="status">{{ status }}</div>  
      </div>      
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'Publish',
  data() {
    return {
      logo: require('../../assets/publish.png'),
      status: 'new'
    }
  },
  methods: {
    enterPublish() {
      this.$router.push({
        path: '/publish'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .icon-item{
    text-align: center;
    position: relative;
    img{
      width: 68%;
      vertical-align: middle;
    }
    .badge{
      position: absolute;
      top: 8px;
      right: -18px;
      font-size: 12px;
      border-radius: 10px;
      background-color: #f56c6c;
      color: #ffffff;
      height: 16px;
      line-height: 16px;
      width: 34px;
      text-align: center;
    }
  }
</style>